<template>
  <div id="cards">
    <div
      v-for="(card) in cards"
      :key="card.title"
      class="card-item"
    >
      <div class="card-header">
        <div class="card-header-left">{{ card.title }}</div>
      </div>
      <VEcharts
        autoresize
        :options="card.optsLeft"
        class="chartClass"
      />

    </div>
  </div>
</template>

<script>
import { commonMethod } from '@/api/mapper/index.js';
import VEcharts from '@/components/vecharts';
export default {
  name: 'Cards',
  components: {
    VEcharts
  },
  data() {
    return {
      cards: [],
      optsLeft: {
      }
    };
  },
  mounted() {
    const { createData } = this;
    setTimeout(() => {
      createData();
    }, 500);

    setInterval(this.createData, 10000);
  },
  methods: {
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    },
    async createData() {
      const list = [
        {
          name: '揭榜场景5大领域数量'
        }
        // {
        //   name: '揭榜场景进度'
        // }

      ];

      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 486
      }).then(res => {
        const nameList = [];
        const numlist = [];
        res.data.map(o => {
          nameList.push(o.NAME);
          numlist.push(o.NUM);
        });
        list[0].optsLeft = {
          grid: {
            top: '5%',
            left: '10%',
            bottom: '25%'
          },
          xAxis: [
            {
              type: 'category',
              data: ['数字政府', '数字社会', '数字经济', '数字法治', '党政机关'],
              axisLabel: {
                textStyle: {
                  color: '#878787'// 坐标值得具体的颜色
                },
                rotate: '45'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#878787' // 坐标值得具体的颜色
                }
              }
            }
          ],
          series: [
            {
              name: '支出',
              type: 'bar',
              data: [20, 24, 54, 66, 30],
              barWidth: 10,
              itemStyle: {
                normal: {
                // 这里是重点
                  color: function(params) {
                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                    return colorList[params.dataIndex];
                  }
                }
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }

          ]
        };
      });
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 487
      }).then(res => {
        const nameList = [];
        const numlist = [];
        res.data.map(o => {
          nameList.push(o.NAME);
          numlist.push(o.NUM);
        });
        // list[1].optsLeft = {
        //   grid: {
        //     top: '5%',
        //     left: '10%',
        //     bottom: '25%'
        //   },
        //   xAxis: [
        //     {
        //       type: 'category',
        //       data: ['正常进度', '一般滞后', '严重滞后'],
        //       axisLabel: {
        //         textStyle: {
        //           color: '#878787'// 坐标值得具体的颜色
        //         },
        //         rotate: '45'
        //       }
        //     }
        //   ],
        //   yAxis: [
        //     {
        //       type: 'value',
        //       axisLabel: {
        //         textStyle: {
        //           color: '#878787' // 坐标值得具体的颜色
        //         }
        //       }
        //     }
        //   ],
        //   series: [
        //     {
        //       name: '支出',
        //       type: 'bar',
        //       data: [100, 20, 1],
        //       barWidth: 10,
        //       itemStyle: {
        //         normal: {
        //         // 这里是重点
        //           color: function(params) {
        //             var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
        //             return colorList[params.dataIndex];
        //           }
        //         }
        //       },
        //       markLine: {
        //         data: [
        //           { type: 'average', name: '平均值' }
        //         ]
        //       }
        //     }

        //   ]
        // };
      });
      this.cards = list.map((foo, i) => ({
        title: foo.name,
        optsLeft: foo.optsLeft
      }));
    }

  }
};
</script>

<style lang="scss" scoped>
  .chartClass{
  width: 100%;
  height:calc(25vh)
  }

#cards {
  // display: flex;
  justify-content: space-between;
  height: 90%;

  .card-item {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 94%;
    margin-left: 3%;
    // display: flex;
    flex-direction: column;
  }

  .card-header {
    height: 20%;
    align-items: center;
    justify-content: space-between;

    .card-header-left {
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      text-align: center;
    }

    .card-header-right {
      padding-right: 20px;
      font-size: 40px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .card-footer-item {
    padding: 5px 10px 0px 10px;
    box-sizing: border-box;
    width: 40%;
    background-color: rgba(6, 30, 93, 0.7);
    border-radius: 3px;

    .footer-title {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .footer-detail {
      font-size: 20px;
      color: #1294fb;
      display: flex;
      font-size: 18px;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}
</style>
